<template>
    <div class="login">
        <div class="login-box">
            <el-tabs v-model="activeName" >
                <el-tab-pane  name="pass">
                    <span slot="label"><i class="el-icon-lock"></i> 密码登录</span>
                    <LoginPass/>
                </el-tab-pane>
                <el-tab-pane  name="code">
                     <span slot="label"><i class="el-icon-mobile-phone"></i> 验证码登录</span>
                    <LoginCode/>
                    </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template> 

<script>
import {mymixins} from "@/utils"
import LoginPass from "@/components/loginpass.vue"
import LoginCode  from "@/components/logincode.vue"

import {getcsrftoken} from "@/api"
export default {
    mixins:[mymixins],
    components:{
        LoginPass,
        LoginCode
    },
    data(){
        return {
            activeName:"pass"
        }
    },
    mounted(){
        // this.$axios.get("/vue/gettoken")
        // .then(res=>{
           
        // })
        getcsrftoken()
        .then(res=>{

        })
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__nav{
    width:100%;
    display:flex;
}
::v-deep .el-tabs__item{
    flex:1;
    text-align:center;
}
.login{
    width:100%;
    height:100%;
    background-image: url(http://data.1000phone.net/static/img/login-bgimg.105cd7b.jpg) ;
    background-size: 120% 100%; 
    background-repeat: no-repeat;
    background-position: 0 0;
    overflow: hidden;
    position: relative;
    animation: move 20s linear infinite;
    -webkit-animation: move 20s linear infinite;
}

@keyframes move {
    0% {
        background-position: -100px 0; 
    }
    50%{
        background-position: 0 0;
    }
    100%{
        background-position: -100px 0; 
    }
}

.login-box{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    width:420px;
    height:260px;
    border:2px solid darkkhaki;
    background: #fff;
    border-radius:10px;
    animation: zoomInDown .8s;
}
</style>